<template>
	<view class="recharge-container">
		<view class="topVue">
			<view class="status"></view>
			<view class="navVue">
				<view style="width: 136rpx;">
					<image src="../../static/imgs/back.png" style="width: 36rpx; height: 36rpx;" @click="backFun"></image>
				</view>
				<view class="nav-title">充值</view>
				<view style="width: 136rpx; height: 36rpx;" @click="toDetail">{{ $t("充值明细") }}</view>	
			</view>
		</view>
		
		<view class="place"></view>

		<view class="header">
			<view class="label">{{ $t("我的余额") }}</view>
			<view class="money"><text class="num">{{ using }}</text> USDT</view>
		</view>
		
		<view class="tabVue">
			<view class="tab" :class="{active: current===0}" @click="current=0; address=list[0].address; addressId=list[0].id">BEP-20</view>
			<view class="tab" :class="{active: current===1}" @click="current=1; address=list[1].address; addressId=list[1].id">TRC-20</view>
		</view>
		
		<view class="main">
			<u--form labelPosition="top" labelWidth="auto" :model="form" :rules="rules" ref="uForm">
				<u-form-item :label="$t('充值地址') + `(${current==0 ? 'BEP-20' : 'TRC-20'})`" prop="num">
					<u--input v-model="form.num" type="number" :placeholder="$t('请输入充值数量')"
						placeholderStyle="{color: #999999}" @input="changeAmount()"></u--input>
				</u-form-item>
				<view class="tip">{{ $t("充值数量不能小于1") }}</view>
				<view class="address-wrap">
					<view style="display: flex; justify-content: space-between; box-sizing: border-box;">
						<view class="address" style="flex: 1;"> {{ $t("充值地址") }}: </view>
						<image class="copy-icon" src="/static/imgs/mine/copy-icon.png" mode="widthFix" @click="copy">
					</view>
					
					<view class="address">
						{{ address }}
					</view>
					</image>
				</view>
				<!-- <u-form-item label="充值地址" prop="num" class="address"> -->
				<!-- <u--input v-model="form.address" border="bottom"></u--input> -->

				<!-- </u-form-item> -->
			</u--form>
			<u-button type="primary" :text="$t('上传充值凭证')" @click="toEvidence"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					num: "",
					// address: 'JIOHIUGGhuwd39isodoo20jcdhJauoSho'
				},
		
				address: "",
				addressId: null,
				using: 0,
				current: 0,
				list: []
			};
		},
		computed: {
			rules() {
				return {
					num: [{
							required: true,
							message: this.$t("请输入充值数量"),
							trigger: ["blur", "change"],
						},
						{
							validator: (rule, value, callback) => {
								return value > 0;
							},
							message: this.$t("充值数量不能小于1"),
							trigger: ["change", "blur"],
						},
					],
				};
			},
		},
		methods: {
			changeAmount() {
				if (this.form.num < 1) {
					this.form.num = 1;
				}
			},
			toDetail() {
				uni.navigateTo({
					url: `/pages/finance/recharge-details`,
				});
			},
			copy() {
				this.$util.copy(this.address);
			},
			backFun(){
				uni.navigateBack({
					delta: 1
				})
			},
			toEvidence() {
				this.$refs.uForm
					.validate()
					.then((res) => {
						// uni.$u.toast(this.$t("校验通过"));
						uni.navigateTo({
							url: `/pages/finance/evidence?addressId=${this.addressId}&amount=${this.form.num}`,
						});
					})
					.catch((errors) => {
						uni.$u.toast(this.$t("校验失败"));
					});
			},
			getAddress() {
				this.$http
					.post(`/front/assets/rechargeAddress`)
					.then((res) => {
						console.log("kkkkkkkkkkkkkkk", res);
						if (res.code === 0) {
							this.list = res.obj
							this.address = res.obj[0].address || "";
							this.addressId = res.obj[0].id || "";
						}
					})
					.catch(() => {});
			},
			getAssets() {
				this.$http
					.post(`/front/assets/assets`)
					.then((res) => {
						if (res.code === 0) {
							this.using = res.obj.wallet.bail;
						}
					})
					.catch((err) => {
						console.log(err);
					});
			},
		},
		onLoad() {
			this.getAddress();
			this.getAssets();
		},
	};
</script>

<style lang="scss" scoped>
	.tabVue {
		width: 690rpx;
		height: 88rpx;
		display: flex;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 20rpx 0px rgba(0,0,0,0.05);
		border-radius: 20rpx;
		box-sizing: border-box;
		margin: 30rpx auto 0;
		.tab {
			width: 3330rpx;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
		}
		.active {
			color: #D55B94;
			font-weight: 600;
		}
	}
	.recharge-container {
		width: 100%;
		height: 100%;
		background: url("../../static/imgs/bg.png") no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		position: fixed;
		.place {
			height: calc(var(--status-bar-height) + 92rpx);
		}
		
		.topVue {
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 99;
			.status {
				width: 100%;
				height: var(--status-bar-height);
			}
			.navVue {
				width: 100%;
				height: 92rpx;
				background: linear-gradient(to right, #FFFBFF, #FFE7F4);
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 0 30rpx;
				.nav-title {
					width: 420rpx;
					height: 92rpx;
					font-size: 36rpx;
					color: #04094C;
					text-align: center;
					line-height: 92rpx;
				}
			}
		}
		.header {
			width: 690rpx;
			height: 98rpx;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 20rpx 0px rgba(0,0,0,0.05);
			border-radius: 20rpx;
			margin: 30rpx auto 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;
			.label {
				color: #333;
				font-weight: 600;
			}

			.money {
				font-weight: 700;
				font-size: 36rpx;
				color: #333333;
			}
		}

		.main {
			padding: 30rpx;
			background: #FFFFFF;
			width: 690rpx;
			box-shadow: 0px 4rpx 20rpx 0px rgba(0,0,0,0.05);
			border-radius: 20rpx;
			box-sizing: border-box;
			margin: 30rpx auto 0;
			.tip {
				margin-top: 30rpx;
				margin-bottom: 30rpx;
				font-size: $uni-font-size-26;
				font-family: PingFang SC;
				color: #999999;
			}

			/deep/ .u-form-item__body__left__content__label {
				color: #333;
				margin-bottom: 47rpx;
			}

			/deep/ .u-input__content__field-wrapper__field {
				color: #333 !important;
			}

			/deep/ .u-input {
				height: 100rpx;
				border: 1rpx solid #343547 !important;
				border-radius: 20rpx;
			}

			.address {
				/deep/ .u-form-item__body__left__content__label {
					margin-bottom: 0;
				}

				/deep/ .u-input {
					height: 100rpx;
					border: none !important;
					border-bottom: 1rpx solid #343547 !important;
					border-radius: 0;
				}

				/deep/ .u-form-item__body__right__content {
					position: relative;
				}
			}

			/deep/ .u-button {
				height: 90rpx;
				margin-top: 100rpx;
				background: #D55B94;
				border-radius: 20rpx;
			}
		}

		.address-wrap {
			widows: 100%;
			// display: flex;
			// align-items: center;
			color: #333;
			height: 100rpx;
			box-sizing: border-box;

			// padding-right: 25rpx;
			.copy-icon {
				width: 34rpx;
			}
			.address {
				 width: 100%; /* 设置容器宽度，文本超过此宽度将被截断 */
				  overflow: hidden; /* 隐藏溢出的文本 */
				  text-overflow: ellipsis; /* 显示省略号 */
				  white-space: nowrap; /* 禁止文本换行 */
				  padding-top: 15rpx;
			}
		}
	}
</style>